import classNames from "classnames";
import styles from "./index.module.scss"
import { Row, Col, Form, Input, Button, Checkbox, Select, message } from 'antd';
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux"
import { setIsOpen } from "@/store/modules/user";

const Register = () => {
	const { Option } = Select;
	const [messageApi, contextHolder] = message.useMessage();
	const navigate = useNavigate()
	const dispatch = useDispatch()

	const msg = "Please complete this required field."
	const onFinish = (values) => {
		console.log('Success:', values);
		messageApi.open({
			type: 'success',
			content: 'Registered successfully,go to login to try.',
		});
		navigate('/')
		dispatch(setIsOpen(true))
		setTimeout(() => {

		}, 1500);
	};
	return <div className={classNames('container', styles.contactFormBox)}>
		{contextHolder}
		<h1>Rgister</h1>
		<Form
			name="basic"
			onFinish={onFinish}
			autoComplete="off"
			layout="vertical"
			style={{ width: "70%" }}
			variant="filled"
			className={styles.formBox}
		>
			<Row gutter={40}>
				<Col span={12}>
					<Form.Item
						label="Username"
						name="username"
						rules={[
							{
								required: true,
								message: msg,
							},
						]}
					>
						<Input />
					</Form.Item>
				</Col>
				<Col span={12}>
					<Form.Item
						label="Password"
						name="password"
						rules={[
							{
								required: true,
								message: msg,
							},
						]}
					>
						<Input.Password />
					</Form.Item>
				</Col>

				<Col span={12}>
					<Form.Item
						label="Confirm Password"
						name="password2"
						dependencies={['password']}
						rules={[
							{
								required: true,
								message: msg,
							},
							({ getFieldValue }) => ({
								validator(_, value) {
									if (!value || getFieldValue('password') === value) {
										return Promise.resolve();
									}
									return Promise.reject(new Error('The new password that you entered do not match!'));
								},
							}),
						]}
					>
						<Input.Password />
					</Form.Item>
				</Col>

				<Col span={12}>
					<Form.Item
						label="Email"
						name="c"
						rules={[
							{
								required: true,
								message: msg
							}, {
								type: 'email',
								message: "Email must be formatted correctly."
							}
						]}
					>
						<Input />
					</Form.Item>
				</Col>

				<Col span={12}>
					<Form.Item
						label="First name"
						name="a"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Input />
					</Form.Item>
				</Col>
				<Col span={12}>
					<Form.Item
						label="Last name"
						name="b"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Input />
					</Form.Item>
				</Col>
				<Col span={12}>
					<Form.Item
						label="Organizations"
						name="d"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Input placeholder="The names of the Organizations you are associated with." />
					</Form.Item>
				</Col>

				<Col span={12}>
					<Form.Item
						label="User Type"
						name="e"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Select
							allowClear
						>
							<Option value="1">China</Option>
							<Option value="2">Australia</Option>
							<Option value="3">Bahamas</Option>
						</Select>
					</Form.Item>
				</Col>

				<Col span={12}>
					<Form.Item
						label="Country"
						name="f"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Select
							allowClear
						>
							<Option value="1">China</Option>
							<Option value="2">Australia</Option>
							<Option value="3">Bahamas</Option>
						</Select>
					</Form.Item>
				</Col>

				<Col span={12}>
					<Form.Item
						label="Region"
						name="g"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Input />
					</Form.Item>
				</Col>

				<Col span={24}>
					<Form.Item
						label="Research aspect"
						name="h"
						rules={[
							{
								required: true,
								message: msg
							},
						]}
					>
						<Input placeholder='A list of subject areas you are interested in researching. e.g. "Water Management." Free text entry or select from the suggestios.' />
					</Form.Item>
				</Col>

				<Col span={24}>
					<Form.Item
						name="agreement"
						valuePropName="checked"
						rules={[
							{
								validator: (_, value) =>
									value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
							},
						]}
					>
						<Checkbox>
							这里放协议描述，以及协议链接，点进去查看具体协议
						</Checkbox>
					</Form.Item>
				</Col>

			</Row>

			<Form.Item>
				<Button type="primary" htmlType="submit">
					Register
				</Button>
			</Form.Item>
		</Form>
	</div>
}
export default Register